<template>
	<view class="box-chat">
		<template v-if="listStatus === 'success'">
			<view
				class="more-content"
				@click="clickMoreButton">
				{{listPageText}}
			</view>
			<template v-for="(item,index) in list">
				<!-- 其他用户 -->
				<view
					class="box-chat-left-for"
					v-if="item.author.uid !== userUID"
					@longpress.stop="longpressHeButton(item)"
					@click="$_to('post/detail?pid=' + item.pid)">
					<view class="_avatar" @click.stop="$_to('user/detail?uid=' + item.author.uid)">
						<image :src="item.author.avatar" mode="widthFix"></image>
					</view>
					<view class="_content">
						<view class="_content-top">
							<text class="_content-top-nickname">{{item.author.nickname}}</text>
							<text class="_content-top-roleName">{{item.author.roleName}}</text>
							<text class="_content-top-lastCommentTimeAgo">{{item.createdTimeAgo}}</text>
							<text class="_content-top-lastCommentTimeAgo" v-if="item.commentCount">本内容{{item.commentCount}}回复</text>
							<text class="_content-top-lastCommentTimeAgo" v-if="item.likeCount">{{item.likeCount}}赞</text>
							<text class="_content-top-lastCommentTimeAgo" v-if="item.followCount">{{item.followCount}}收藏</text>
						</view>
						<view class="_content-center">
							<view
								class="_content-center-text"
								v-if="!item.files.images.length&&!item.files.videos.length&&!item.files.audios.length&&!item.geotag">
								<view>
									{{$_filterHtml(item.content)}}
								</view>
								
							</view>
							<view
								class="_content-center-image"
								v-if="item.files.images.length"
								@click.stop="$_picturePreview(0,item.files.images)">
								<image :src="item.files.images[0].imageRatioUrl" mode="widthFix" @load="imageLoad"></image>
							</view>
							<view
								class="_content-center-video"
								v-if="item.files.videos.length"
								@click.stop="$_to('pages/video?url=' + encodeURIComponent(item.files.videos[0].videoUrl))">
								<text class="iconfont icon-zhibo"></text>
							</view>
							<view
								@click.stop="clickGeotagButton(item.geotag)"
								class="_content-center-geotag"
								v-if="item.geotag">
								<view>
									<text class="iconfont icon-dingwei1"></text>
									<text class="_text">{{item.geotag.name}}</text>
								</view>
							</view>
							<view class="_content-center-audio" v-if="item.files.audios.length">
								<global-audio
									Css="width:400rpx;"
									:Url="item.files.audios[0].audioUrl"></global-audio>
							</view>
							<view
								v-if="item.quotedPost"
								class="_content-center-quotedPost"
								@click.stop="$_to('post/detail?pid=' + item.quotedPost.pid)">
								<view>
									<text>
										[引用] {{item.quotedPost.author.nickname}}：{{$_filterHtml(item.quotedPost.content)}}
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 我自己发的 -->
				<view
					class="box-chat-right-for"
					v-if="item.author.uid === userUID"
					@longpress.stop="longpressMyButton(item)"
					@click="$_to('post/detail?pid=' + item.pid)">
					<view class="_content">
						<view class="_content-top">
							<text class="_content-top-lastCommentTimeAgo" v-if="item.likeCount">{{item.likeCount}}赞</text>
							<text class="_content-top-lastCommentTimeAgo" v-if="item.followCount">{{item.followCount}}收藏</text>
							<text class="_content-top-lastCommentTimeAgo" v-if="item.commentCount">本内容{{item.commentCount}}回复</text>
							<text class="_content-top-lastCommentTimeAgo">{{item.createdTimeAgo}}</text>
							<text class="_content-top-roleName">{{item.author.roleName}}</text>
							<text class="_content-top-nickname">{{item.author.nickname}}</text>
						</view>
						<view class="_content-center">
							<view
								class="_content-center-text"
								v-if="!item.files.images.length&&!item.files.videos.length&&!item.files.audios.length&&!item.geotag">
								{{$_filterHtml(item.content)}}
							</view>
							<view
								class="_content-center-image"
								v-if="item.files.images.length"
								@click.stop="$_picturePreview(0,item.files.images)">
								<image :src="item.files.images[0].imageRatioUrl" mode="widthFix" @load="imageLoad"></image>
							</view>
							<view
								class="_content-center-video"
								v-if="item.files.videos.length"
								@click.stop="$_to('pages/video?url=' + encodeURIComponent(item.files.videos[0].videoUrl))">
								<text class="iconfont icon-zhibo"></text>
							</view>
							<view
								@click.stop="clickGeotagButton(item.geotag)"
								class="_content-center-geotag"
								v-if="item.geotag">
								<view>
									<text class="iconfont icon-dingwei1"></text>
									<text class="_text">{{item.geotag.name}}</text>
								</view>
							</view>
							<view class="_content-center-audio" v-if="item.files.audios.length">
								<global-audio
									Css="width:400rpx;"
									:Url="item.files.audios[0].audioUrl"></global-audio>
							</view>
						</view>
						<view
							v-if="item.quotedPost"
							class="_content-center-quotedPost"
							@click.stop="$_to('post/detail?pid=' + item.quotedPost.pid)">
							<view>
								<text>
									[引用] {{item.quotedPost.author.nickname}}：{{$_filterHtml(item.quotedPost.content)}}
								</text>
							</view>
						</view>
					</view>
					<view class="_avatar" @click.stop="$_to('user/detail?uid=' + item.author.uid)">
						<image :src="item.author.avatar" mode="widthFix"></image>
					</view>
				</view>
			</template>
		</template>
		<template v-if="listStatus === 'loading'">
			<global-loading></global-loading>
		</template>
		<template v-if="listStatus === 'empty'">
			<global-empty></global-empty>
		</template>
		<view class="quote-post" v-if="quotePid" :style="keyboardHeight?'bottom:'+keyboardHeight+'px;margin-bottom:126rpx;':''">
			<view class="quote-post-nickname">{{quoteUser}}:</view>
			<view class="quote-post-content">{{$_filterHtml(quoteContent)}}</view>
			<view class="quote-post-del-button" @click="clickQuotePostDelButton">
				<text class="iconfont icon-shibai1"></text>
			</view>
		</view>
		<view class="refresh-button" @click="clickRefreshButton">
			<text class="iconfont icon-switch-filling"></text>
		</view>
		<view style="width: 100%;height: 126rpx;"></view>
		
		<!-- 浮动前 -->
		<view class="footer-button" :style="'bottom:'+keyboardHeight+'px;'">
			<!-- #ifndef H5 -->
			<view class="_audio" @click="audioStatus = !audioStatus">
				<text class="iconfont icon-yuyin" v-if="audioStatus == false"></text>
				<text class="iconfont icon-text" v-if="audioStatus == true"></text>
			</view>
			<!-- #endif -->
			<view class="_textarea" v-if="audioStatus == false" @click="clickCommentBoxButton">
				<textarea
					maxlength="-1"
					v-model="content"
					show-confirm-bar="{{false}}"
					:adjust-position="false"
					@blur="blur"
					@focus="focus"></textarea>
			</view>
			<view class="_audio-button" v-if="audioStatus == true">
				<view @click="clickAudioButton">
					{{audioButtonText}}
					<text v-if="audioDuration">{{audioDuration}}s</text>
				</view>
			</view>
			<view class="_smile" @click="emojiStatus = !emojiStatus">
				<text class="iconfont icon-smile"></text>
			</view>
			<view
				class="_add-circle"
				v-if="!content"
				@click="cliclAddButton">
				<text class="iconfont icon-add-circle"></text>
			</view>
			<view
				class="_publish-button"
				v-if="content"
				@click="clickPublishButton">
				<view>发布</view>
			</view>
		</view>
		
		
		<!-- 选择表情 -->
		<view v-if="emojiStatus" class="global-bottom-to-top-pop-up">
			<view class="_top" @click="emojiStatus = false"></view>
			<view class="_bottom">
				<view class="_title">
					<text class="_title-text">{{$t('editorStickers')}}</text>
					<view @click="emojiStatus = false"><text class="iconfont icon-close-bold"></text></view>
				</view>
				<view class="select-emoji-box">
					<view class="_box-left">
						<scroll-view scroll-y>
							<view @click="clickSwitchEmojiButton('emoji','')"
								:class="emojiHover == 'emoji'?'_hover':''">
								Emoji
							</view>
							<view
								@click="clickSwitchEmojiButton(item.code,item)"
								:class="emojiHover == item.code?'_hover':''"
								v-for="item in emojiCategories">
								{{item.name}}
							</view>
						</scroll-view>
					</view>
					<view class="_box-right">
						<scroll-view scroll-y>
							<view class="_emoji">
								<template v-if="emojiHover == 'emoji'">
									<view
										@click="clickEmojiButton(item)"
										v-for="item in editorConfigJSON.emoji"
										class="_emoji-for">
										<text>{{item}}</text>
									</view>
								</template>
								<template v-else>
									<view
										@click="clickEmojiButton(item.codeFormat)"
										v-for="item in emojiNativeList"
										class="_emoji-for">
										<view>
											<global-lazy-load-image height="65rpx" :image="item.image"
												:imgMode='"widthFix"'></global-lazy-load-image>
										</view>
									</view>
								</template>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"box-chat",
		props:{
			groupGid:{
				type: String,
				default:null
			}
		},
		data() {
			return {
				editorConfigs:null,//编辑器配置信息
				userUID:"",
				list:[],
				listStatus:"loading",
				listPage:2,
				listPageText: this.$t('clickToLoadMore'),
				content:"",
				audioStatus:false,
				
				emojiStatus: false, //--------表情弹窗
				emojiHover: "emoji", //-------当前表情分类
				emojiCategories: [], //-------原生表情分类
				emojiNativeList: [], //-------原生表情列表
				editorConfigJSON:null,
				
				draftDID:"",
				fileUrl:"",
				
				audioDuration:0,//录音秒数
				audioButtonText: "单击 录音",
				audioStartStatus:false,//录音状态
				
				quotePid:"",//引用帖子PID
				quoteContent:"",//引用帖子的内容
				quoteUser:"",//引用谁的帖子
				
				keyboardHeight:0,
				imagesToLoadCount: 0, // 需要加载的图片总数
				loadedImagesCount: 0, // 已经加载完成的图片数
			};
		},
		mounted(){
			// #ifndef H5
			uni.onKeyboardHeightChange(res => {
				this.keyboardHeight = res.height;
			})
			// #endif
			uni.request({
				url: this.$_configFile() + "editor.json",
				success: (res) => {
					this.editorConfigJSON = res.data;
				}
			})
			if(uni.getStorageSync('accountAuthToken')){
				this.userUID = JSON.parse(uni.getStorageSync('accountAuthToken')).uid;
			}
			this.getList();
		},
		methods:{
			imageLoad(){
				this.loadedImagesCount++
				if(this.loadedImagesCount === this.imagesToLoadCount){
					uni.pageScrollTo({
						scrollTop: 99999999,
						duration: 88
					});
				}
			},
			getList(){
				this.$_request(
					"GET", "/api/fresns/v1/post/list",
					{
						"groups":this.groupGid,
						"filterType":"whitelist",
						"filterKeys":"author,pid,createdTimeAgo,commentCount,files,content,manages,geotag,quotedPost.pid,quotedPost.content,quotedPost.author.nickname,likeCount,followCount,interaction",
						"filterAuthorType":"whitelist",
						"filterAuthorKeys":"uid,avatar,nickname,roleName",
						"filterGeotagType":"whitelist",
						"filterGeotagKeys":"name,latitude,longitude",
						"page":1
					},
					(res) => {
						uni.hideLoading();
						if (res.data.data.list.length) {
							this.list = res.data.data.list.reverse();
							this.listStatus = "success";
							uni.pageScrollTo({
								scrollTop: 99999999,
								duration: 88
							});
						} else {
							this.listStatus = "empty";
						}
						if(uni.getStorageSync('accountAuthToken')){
							this.getEditorConfigs();
						}
						// 图片的事情
						for(let i=0;i<this.list.length;i++){
							if(this.list[i].files.images.length){
								this.imagesToLoadCount++
							}
						}
					}
				)
			},
			clickMoreButton(){
				if (this.listPageText == this.$t('loading')) { return }
				this.listPageText = this.$t('loading');
				this.$_request(
					"GET", "/api/fresns/v1/post/list",
					{
						"groups":this.groupGid,
						"filterType":"whitelist",
						"filterKeys":"author,pid,createdTimeAgo,commentCount,files,content,manages,geotag,quotedPost.pid,quotedPost.content,quotedPost.author.nickname,likeCount,followCount,interaction",
						"filterAuthorType":"whitelist",
						"filterAuthorKeys":"uid,avatar,nickname,roleName",
						"filterGeotagType":"whitelist",
						"filterGeotagKeys":"name,latitude,longitude",
						"page": this.listPage
					},
					(res) => {
						if (res.data.data.list.length) {
							this.list = res.data.data.list.reverse().concat(this.list);
							this.listPage++
							this.listPageText = this.$t('clickToLoadMore')
						} else {
							this.listPageText = this.$t('listEmpty')
						}
					}
				)
			},
			// 请求后端编辑器配置
			getEditorConfigs(){
				this.$_request(
					"GET",`/api/fresns/v1/editor/post/configs`,{},
					(res) => {
						if(res.data.code === 0){
							this.editorConfigs = res.data.data;
						}else{
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 1500
							});
							setTimeout(()=>{
								uni.navigateBack();
							},1500);
						}
					}
				)
			},
			// 点击，发布按钮
			clickPublishButton(){
				uni.showLoading();
				// 是否开启了本地关键词检测
				if(this.editorConfigJSON.sensitiveWordDetection){
					// 获取本地关键词列表
					uni.request({
						url:this.$_configFile() + "sensitive.json",
						success: (res) => {
							this.sensitive = res.data;
							// = 1 是替换，否则提示
							if(this.editorConfigJSON.sensitiveWordDetectionType == 1){
								this.sensitive.forEach(word => {
									let regex = new RegExp(word, 'gi');
									this.content = this.content.replace(regex, '***');
								});
								this.$_request(
									"POST","/api/fresns/v1/editor/post/publish",
									{
										"content":this.content,
										"gid":this.groupGid,
										"quotePid":this.quotePid
									},
									(_res) => {
										uni.hideLoading();
										if(_res.data.code == 0 ){
											this.quotePid = "";
											this.quoteContent = "";
											this.quoteUser = "";
											this.content = "";
											this.listPage = 2;
											this.getList();
										}else{
											uni.showToast({
												title: _res.data.message,
												icon: 'none',
												duration: 2000
											});
										}
									}
								)
							}else{
								let _key =  this.sensitive.some(word => this.content.includes(word));
								if(_key){
									uni.hideLoading();
									uni.showToast({
										title: this.$t('warningSensitive'),
										icon: 'error',
										duration: 1500
									});
									return;
								}
								this.$_request(
									"POST","/api/fresns/v1/editor/post/publish",
									{
										"content":this.content,
										"gid":this.groupGid,
										"quotePid":this.quotePid
									},
									(res_) => {
										uni.hideLoading();
										if(res_.data.code == 0 ){
											this.quotePid = "";
											this.quoteContent = "";
											this.quoteUser = "";
											this.content = "";
											this.listPage = 2;
											this.getList();
										}else{
											uni.showToast({
												title: res_.data.message,
												icon: 'none',
												duration: 2000
											});
										}
									}
								)
							}
						}
					})
				}else{
					this.$_request(
						"POST","/api/fresns/v1/editor/post/publish",
						{
							"content":this.content,
							"gid":this.groupGid,
							"quotePid":this.quotePid
						},
						(res) => {
							uni.hideLoading();
							if(res.data.code == 0 ){
								this.quotePid = "";
								this.quoteContent = "";
								this.quoteUser = "";
								this.content = "";
								this.listPage = 2;
								this.getList();
							}else{
								uni.showToast({
									title: res.data.message,
									icon: 'none',
									duration: 2000
								});
							}
						}
					)
				}
			},
			// 长按自己的
			longpressMyButton(item){
				uni.showActionSheet({
					itemList: ['删除本内容？','引用','点赞','复制','评论'],
					success: (res) => {
						if(res.tapIndex === 0){
							uni.showLoading();
							this.$_request(
								"DELETE",`/api/fresns/v1/post/${item.pid}`,{},
								(ref) => {
									uni.hideLoading();
									if(ref.data.code == 0 ){
										this.getList();
									}else{
										uni.showToast({
											title: ref.data.message,
											icon: 'none',
											duration: 2000
										});
									}
								}
							)
						}
						if(res.tapIndex === 1){
							this.quotePid = item.pid;
							this.quoteContent = item.content;
							this.quoteUser = item.author.nickname;
						}
						if(res.tapIndex === 2){
							this.$_request(
								"POST","/api/fresns/v1/user/mark",
								{
									"markType":"like",
									"type":"post",
									"fsid":item.pid
								},
								(ref) => {
									if(ref.data.code == 0){
										if(item.interaction.likeStatus){
											item.interaction.likeStatus = false;
											item.likeCount--
										}else{
											item.interaction.likeStatus = true;
											item.likeCount++
										}
									}else{
										uni.showToast({
											title: ref.data.message,
											duration: 2000
										});
									}
								}
							)
						}
						if(res.tapIndex === 3){
							uni.setClipboardData({
								data: item.content,
								success: (res) => {}
							});
						}
						if(res.tapIndex === 4){
							this.$_to('post/detail?pid=' + item.pid)
						}
					}
				});
			},
			// 长按他人
			longpressHeButton(item){
				if(item.manages.length){
					uni.showActionSheet({
						itemList: ['管理菜单','引用','收藏','点赞','复制','评论'],
						success: (res) => {
							if(res.tapIndex === 0){
								for(let i=0;i<item.manages.length;i++){
									if(item.manages[i].fskey == 'AdminMenu'){
										let AdminMenu = item.manages[i];
										let replacedUrl = AdminMenu.appUrl.replace(/\{accessToken\}/g, `${this.$_extensionPluginAccessToken()}`)
											.replace(/\{postMessageKey\}/g, `${AdminMenu.fskey}`)
											.replace(/\{viewType\}/g, 'detail')
											.replace(/\{uid\}/g, '')
											.replace(/\{pid\}/g, `${item.pid}`)
											.replace(/\{cid\}/g, '');
										this.$_to("pages/extendWebView?url="+encodeURIComponent(replacedUrl))
									}
								}
							}
							if(res.tapIndex === 1){
								this.quotePid = item.pid;
								this.quoteContent = item.content;
								this.quoteUser = item.author.nickname;
							}
							if(res.tapIndex === 2){
								this.$_request(
									"POST","/api/fresns/v1/user/mark",
									{
										"markType":"follow",
										"type":"post",
										"fsid":item.pid
									},
									(ref) => {
										if(ref.data.code == 0){
											if(item.interaction.followStatus){
												item.interaction.followStatus = false;
												item.followCount--
											}else{
												item.interaction.followStatus = true;
												item.followCount++
											}
										}else{
											uni.showToast({
												title: ref.data.message,
												duration: 2000
											});
										}
									}
								)
							}
							if(res.tapIndex === 3){
								this.$_request(
									"POST","/api/fresns/v1/user/mark",
									{
										"markType":"like",
										"type":"post",
										"fsid":item.pid
									},
									(ref) => {
										if(ref.data.code == 0){
											if(item.interaction.likeStatus){
												item.interaction.likeStatus = false;
												item.likeCount--
											}else{
												item.interaction.likeStatus = true;
												item.likeCount++
											}
										}else{
											uni.showToast({
												title: ref.data.message,
												duration: 2000
											});
										}
									}
								)
							}
							if(res.tapIndex === 4){
								uni.setClipboardData({
									data: item.content,
									success: (res) => {}
								});
							}
							if(res.tapIndex === 5){
								this.$_to('post/detail?pid=' + item.pid)
							}
						}
					});
				}
			},
			// 点击更多按钮
			cliclAddButton(){
				uni.showActionSheet({
					itemList: ['图片','视频','位置'],
					success: (res) => {
						if(res.tapIndex === 0){
							if(this.editorConfigs.editor.image.status){
								this.cliclAddButtonImage();
							}else{
								uni.showToast({
									title: '不允许发布图片',
									icon: 'none',
									duration: 1500
								});
							}
						}
						if(res.tapIndex === 1){
							if(this.editorConfigs.editor.video.status){
								this.cliclAddButtonVideo();
							}else{
								uni.showToast({
									title: '不允许发布视频',
									icon: 'none',
									duration: 1500
								});
							}
						}
						if(res.tapIndex === 2){
							if(this.editorConfigs.editor.location.status){
								uni.chooseLocation({
									success: (res) => {
										let locationInfo = {
											"langTag": "",
											"name": res.name,
											"mapId": 4,
											"latitude": res.latitude,
											"longitude": res.longitude
										}
										this.$_request(
											"POST","/api/fresns/v1/editor/post/publish",
											{
												"gid":this.groupGid,
												"content":"chatMap",
												"locationInfo":JSON.stringify(locationInfo)
											},
											(ref) => {
												if(ref.data.code == 0 ){
													this.content = "";
													this.listPage = 2;
													this.getList();
												}else{
													uni.showToast({
														title: ref.data.message,
														icon: 'none',
														duration: 2000
													});
												}
											}
										)
									}
								});
							}else{
								uni.showToast({
									title: '不允许发布位置',
									icon: 'none',
									duration: 1500
								});
							}
						}
					}
				});
			},
			// 视频按钮
			cliclAddButtonVideo(){
				uni.chooseVideo({
					maxDuration:60,
					success: (res) => {
						this.fileUrl = res.tempFilePath;
						this.postEditorDraft("cliclAddButtonVideo");
					}
				})
			},
			// 创建草稿
			postEditorDraft(type){
				this.$_request(
					"POST","/api/fresns/v1/editor/post/draft",
					{
						"createType":1
					},
					(res) => {
						if(res.data.code === 0) {
							// 创建成功，获取草稿DID
							this.draftDID = res.data.data.detail.did;
							if(type === 'cliclAddButtonVideo'){
								// 上传视频
								this.clickVideoButtonUpload();
							}
							if(type === 'clickAudioButton'){
								// 上传视频
								this.clickAudioButtonUpload();
							}
						}else if(res.data.code === 38106){
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 1500
							});
							setTimeout(()=>{
								uni.redirectTo({
									url:"/pages/draft/draft"
								})
							},1500);
						}else{
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 1500
							});
							setTimeout(()=>{
								uni.navigateBack();
							},1500);
						}
					}
				)
			},
			// 上传音频
			clickAudioButtonUpload(){
				const _this = this;
				uni.showLoading();
				uni.uploadFile({
					url: _this.$_url() + "/api/fresns/v1/common/file/upload",
					filePath: _this.fileUrl,
					name: "file",
					header: _this.$_fresnsHeader(),
					formData:{
						"usageType":`postDraft`,
						"usageFsid":_this.draftDID,
						"type":"audio"
					},
					success(res) {
						uni.hideLoading();
						if(JSON.parse(res.data).code == 0){
							_this.fileUrl = "";
							_this.patchEditorDraft('clickVideoButtonUpload');
							uni.hideLoading();
						}else{
							uni.showToast({
								title: JSON.parse(res.data).message,
								icon: "none",
								duration: 1000
							});
						}
					}
				})
			},
			// 上传视频
			clickVideoButtonUpload(){
				const _this = this;
				uni.showLoading();
				uni.uploadFile({
					url: _this.$_url() + "/api/fresns/v1/common/file/upload",
					filePath: _this.fileUrl,
					name: "file",
					header: _this.$_fresnsHeader(),
					formData:{
						"usageType":`postDraft`,
						"usageFsid":_this.draftDID,
						"type":"video"
					},
					success(res) {
						uni.hideLoading();
						if(JSON.parse(res.data).code == 0){
							_this.fileUrl = "";
							_this.patchEditorDraft('clickVideoButtonUpload');
							uni.hideLoading();
						}else{
							uni.showToast({
								title: JSON.parse(res.data).message,
								icon: "none",
								duration: 1000
							});
						}
					}
				})
			},
			// 更新草稿
			patchEditorDraft(type){
				this.$_request(
					"PATCH",`/api/fresns/v1/editor/post/draft/${this.draftDID}`,
					{
						"quotePid":this.quotePid,// 帖子专用: 引用的帖子 PID
						"gid":this.groupGid,// 帖子专用: 小组
						"content":"chatFile",// 正文内容
					},
					(res) => {
						uni.hideLoading();
						// 如果保存失败
						if(res.data.code != 0){
							uni.showToast({
								title: res.data.message,
								duration: 1500,
								icon:"none"
							});
							return
						}
						// 点击直接发布按钮事件
						if(type === 'clickVideoButtonUpload'){
							this.$_request(
								"POST",`/api/fresns/v1/editor/post/draft/${this.draftDID}`,{},
								(ref) => {
									if(ref.data.code === 0){
										this.getList();
									}else if(ref.data.code === 38208){
										// 小组不存在，打开小组选择页面
										this.clickGroupButton();
									}else{
										uni.showToast({
											title: ref.data.message,
											icon: 'none',
											duration: 1500
										});
									}
								}
							)
						}
					}
				)
			},
			// 图片按钮
			cliclAddButtonImage(){
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.cliclAddButtonImageUpload(res.tempFiles)
					}
				})
			},
			// 图片上传
			cliclAddButtonImageUpload(image){
				const _this = this;
				uni.showLoading();
				uni.uploadFile({
					url: _this.$_url() + "/api/fresns/v1/editor/post/publish",
					filePath: image[0].path,
					name: "image",
					header: _this.$_fresnsHeader(),
					formData:{
						"content":"chatImage",
						"gid":_this.groupGid
					},
					success(res) {
						uni.hideLoading();
						if(JSON.parse(res.data).code == 0){
							console.log(JSON.parse(res.data))
							_this.content = "";
							_this.listPage = 2;
							_this.getList();
						}else{
							uni.hideLoading();
							uni.showToast({
								title: JSON.parse(res.data).message,
								icon: 'none',
								duration: 1000
							});
						}
					}
				})
			},
			// 左侧切换表情按钮
			clickSwitchEmojiButton(type, item) {
				this.emojiHover = type;
				if (type != 'emoji') {
					this.emojiNativeList = item.stickers;
				}
			},
			// 选中表情
			clickEmojiButton(e) {
				this.content += ` ${e} `;
				this.emojiStatus = false;
			},
			// 点击开始录音按钮
			clickAudioButton(){
				this.audioStartStatus = !this.audioStartStatus;
				if(this.audioStartStatus){
					this.audioButtonText = "录制中... "
					uni.getRecorderManager().start();
					this.timer = setInterval(() => {
						this.audioDuration += 1;
						if(this.audioDuration == this.editorConfigs.editor.audio.maxDuration){
							this.audioButtonText = "单击 录音";
							this.audioStartStatus = false;
							clearInterval(this.timer)
							uni.getRecorderManager().stop();
							uni.getRecorderManager().onStop((res) => {
								this.fileUrl = res.tempFilePath;
								this.postEditorDraft("clickAudioButton");
							});
						}
					}, 1000);
				}else{
					this.audioButtonText = "单击 录音";
					this.audioStartStatus = false;
					this.audioDuration = 0;
					clearInterval(this.timer)
					uni.getRecorderManager().stop();
					uni.getRecorderManager().onStop((res) => {
						this.fileUrl = res.tempFilePath;
						this.postEditorDraft("clickAudioButton");
					});
				}
			},
			// 点击刷新按钮
			clickRefreshButton(){
				uni.showLoading();
				this.listPage = 2;
				this.getList();
			},
			clickQuotePostDelButton(){
				this.quotePid = "";
				this.quoteContent = "";
				this.quoteUser = "";
			},
			clickGeotagButton(geotag){
				uni.openLocation({
					latitude: parseFloat(geotag.latitude),
					longitude: parseFloat(geotag.longitude),
					success: (res) => {}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
page{background: #ededed;}
.box-chat{
	padding: 0 25rpx;
	.more-content{
		padding: 25rpx 0 0 0;
		font-size: 22rpx;
		line-height: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: $placeholder;
	}
	.box-chat-left-for{
		display: flex;
		padding-top: 25rpx;
		._avatar{
			width: 90rpx;
			height: 90rpx;
			overflow: hidden;
			border-radius: 10rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
		}
		._content{
			flex: 1;
			._content-top{
				line-height: 28rpx;
				text{
					font-size: 28rpx;
					color: #888888;
				}
				._content-top-roleName,._content-top-lastCommentTimeAgo{
					font-size: 18rpx;
					padding-left: 10rpx;
					color: $placeholder;
				}
			}
			._content-center{
				margin-right: 110rpx;
				._content-center-text{
					display: flex;
					view{
						background: #FFF;
						padding: 20rpx;
						box-shadow: 0 0 5rpx #ededed;
						margin-top: 15rpx;
						border-radius: 10rpx;
						font-size: 32rpx;
						line-height: 45rpx;
					}
				}
				._content-center-image{
					overflow: hidden;
					border-radius: 10rpx;
					margin-top: 15rpx;
					box-shadow: 0 0 5rpx #ededed;
					image{
						display: block;
						width: 100%;
					}
				}
				._content-center-video{
					width: 400rpx;
					height: 200rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					line-height: 80rpx;
					background: #000;
					border-radius: 10rpx;
					margin-top: 15rpx;
					text{
						font-size: 80rpx;
						color: #FFF;
					}
				}
				._content-center-audio{
					margin-top: 15rpx;
				}
				._content-center-geotag{
					margin-top: 15rpx;
					display: flex;
					view{
						background: #FFF;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 25rpx;
						line-height: 28rpx;
						.icon-dingwei1{
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 40rpx;
							line-height: 40rpx;
							padding-right: 10rpx;
						}
						._text{
							font-size: 28rpx;
						}
					}
				}
				._content-center-quotedPost{
					display: flex;
					align-items: center;
					view{
						line-height: 22rpx;
						background: $border;
						margin-top: 10rpx;
						padding: 15rpx;
						border-radius: 5rpx;
						text{
							font-size: 22rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							color: $placeholder;
						}
					}
				}
			}
		}
	}
	.box-chat-right-for{
		display: flex;
		padding-top: 25rpx;
		._content{
			flex: 1;
			._content-top{
				text-align: right;
				line-height: 28rpx;
				text{
					font-size: 28rpx;
					color: #888888;
				}
				._content-top-roleName,._content-top-lastCommentTimeAgo{
					font-size: 18rpx;
					padding-right: 10rpx;
					color: $placeholder;
				}
			}
			._content-center{
				margin-left: 110rpx;
				display: flex;
				justify-content: flex-end;
				._content-center-text{
					background: #95ec69;
					padding: 15rpx;
					box-shadow: 0 0 5rpx #ededed;
					margin-top: 15rpx;
					border-radius: 10rpx;
					font-size: 32rpx;
					line-height: 45rpx;
				}
				._content-center-image{
					overflow: hidden;
					border-radius: 10rpx;
					margin-top: 15rpx;
					box-shadow: 0 0 5rpx #ededed;
					width: 100%;
					image{
						display: block;
						width: 100%;
					}
				}
				._content-center-video{
					width: 400rpx;
					height: 200rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					line-height: 80rpx;
					background: #000;
					border-radius: 10rpx;
					margin-top: 15rpx;
					text{
						font-size: 80rpx;
						color: #FFF;
					}
				}
				._content-center-audio{
					margin-top: 15rpx;
				}
				._content-center-geotag{
					margin-top: 15rpx;
					display: flex;
					view{
						background: #95ec69;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 25rpx;
						line-height: 28rpx;
						.icon-dingwei1{
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 40rpx;
							line-height: 40rpx;
							padding-right: 10rpx;
						}
						._text{
							font-size: 28rpx;
						}
					}
				}
			}
			._content-center-quotedPost{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				view{
					line-height: 22rpx;
					background: $border;
					margin-top: 10rpx;
					padding: 15rpx;
					border-radius: 5rpx;
					text{
						font-size: 22rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						color: $placeholder;
					}
				}
			}
		}
		._avatar{
			width: 90rpx;
			height: 90rpx;
			overflow: hidden;
			border-radius: 10rpx;
			flex-shrink: 0;
			margin-left: 20rpx;
		}
	}
	.footer-button{
		width: 100%;
		height: 100rpx;
		background: #f7f7f7;
		border-top: 1rpx solid #d2d2d2;
		position: fixed;
		z-index: 800;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		._audio{
			height: 100rpx;
			display: flex;
			align-items: center;
			padding: 0 25rpx;
			line-height: 35rpx;
			flex-shrink: 0;
			text{
				font-size: 35rpx;
				display: block;
				border: 4rpx solid $primary;
				width: 45rpx;
				height: 45rpx;
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
			}
		}
		._textarea{
			flex: 1;
			height: 100rpx;
			display: flex;
			align-items: center;
			textarea{
				background: #FFF;
				height: 80rpx;
				width: 100%;
				font-size: 28rpx;
				line-height: 40rpx;
				
			}
		}
		._audio-button{
			flex: 1;
			height: 100rpx;
			display: flex;
			align-items: center;
			view{
				height: 80rpx;
				width: 100%;
				background: #FFF;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 28rpx;
				font-size: 28rpx;
			}
		}
		._smile{
			flex-shrink: 0;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-left: 25rpx;
			line-height: 60rpx;
			text{
				font-size: 60rpx;
			}
		}
		._add-circle{
			flex-shrink: 0;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-left: 10rpx;
			line-height: 60rpx;
			padding-right: 20rpx;
			text{
				font-size: 60rpx;
			}
		}
		._publish-button{
			flex-shrink: 0;
			height: 100rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx 0 15rpx;
			view{
				height: 60rpx;
				background: #07c160;
				color: #FFF;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 15rpx;
				border-radius: 5rpx;
			}
		}
	}
	.quote-post{
		width: 605rpx;
		height: 70rpx;
		background: $theme;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 126rpx;
		left: 25rpx;
		z-index: 999;
		border-radius: 10rpx;
		.quote-post-nickname{
			display: flex;
			align-items: center;
			line-height: 28rpx;
			font-size: 28rpx;
			padding: 0 10rpx 0 20rpx;
			color: #FFF;
			flex-shrink: 0;
		}
		.quote-post-content{
			flex: 1;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			color: #FFF;
		}
		.quote-post-del-button{
			padding: 0 20rpx 0 10rpx;
			display: flex;
			align-items: center;
			line-height: 35rpx;
			text{
				font-size: 35rpx;
				color: #FFF;
			}
		}
	}
	.refresh-button{
		width: 70rpx;
		height: 70rpx;
		background: $theme;
		line-height: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 100rpx;
		position: fixed;
		bottom: 126rpx;
		right: 25rpx;
		z-index: 999;
		text{
			font-size: 35rpx;
			color: #FFF;
		}
	}
}
// 弹窗 表情
.select-emoji-box {
	display: flex;

	._box-left {
		width: 150rpx;
		max-height: 800rpx;
		background: $border;
		flex-shrink: 0;

		scroll-view {
			width: 150rpx;
			max-height: 800rpx;
			white-space: nowrap;

			view {
				font-size: 28rpx;
				line-height: 28rpx;
				padding: 25rpx;
			}

			._hover {
				background: #FFF;
				color: $theme;
			}
		}
	}

	._box-right {
		flex: 1;
		max-height: 800rpx;

		scroll-view {
			width: 100%;
			max-height: 800rpx;
			white-space: nowrap;
			display: flex;

			._emoji {
				display: flex;
				flex-wrap: wrap;
				padding: 25rpx;

				._emoji-for {
					padding: 12.5rpx;

					text {
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 50rpx;
						line-height: 50rpx;
					}

					view {
						width: 65rpx;
						height: 65rpx;
						overflow: hidden;
					}
				}
			}
		}
	}
}
</style>